
<template>
  <div>
    <div class="search">
      <div class="search-bar">
        <van-search
          v-model="value"
          shape="round"
          background="#4fc08d"
          placeholder="请输入商品名称"
          style="
            z-index: 99;
            position: fixed;
            width: 100%;
            padding-top: 14px;
            border-bottom: solid 1px grey;
          "
        />

        <div class="search-bar-icon"></div>
      </div>
    </div>
    <div style="height: 59px"></div>
    <div>
      <div class="row">
        <div class="col-3 pr-0">
          <van-sidebar v-model="active" style="overflow: auto">
            <van-sidebar-item title="推荐" to="#v-pills-home" replace />
            <van-sidebar-item title="标签名称" to="#v-pills-profile" replace />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="1" />
            <van-sidebar-item title="结尾" />
          </van-sidebar>
        </div>
        <div class="col-9">
          <div
            class="tab-content"
            id="v-pills-tabContent"
            style="overflow: auto"
          >
            <div
              class="tab-pane fade show active"
              id="v-pills-home"
              role="tabpanel"
              aria-labelledby="v-pills-home-tab"
            >
              <ListOne></ListOne>
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-profile"
              role="tabpanel"
              aria-labelledby="v-pills-profile-tab"
            >
              <ListTwo></ListTwo>
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-messages"
              role="tabpanel"
              aria-labelledby="v-pills-messages-tab"
            >
              ...
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-settings"
              role="tabpanel"
              aria-labelledby="v-pills-settings-tab"
            >
              ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
  components: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.van-sidebar-item {
  font-size: 16px;
}
.van-sidebar {
  width: 25%;
  position: fixed;
  height: 85%;
}
.van-sidebar-item--select::before {
  width: 4px;
  height: 35px;
  background-color: rgb(79, 192, 141);
}
// .menulist {
//   padding-left: 0px;
//   width: 100%;
//   float: right;
//   position: fixed;
// }
.tab-content {
  width: 75%;
  position: fixed;
  height: 85%;
}
//col-9
.name {
  margin-right: 0.125rem;
  padding-top: 7px;
  font-size: 1.1rem;
  float: left;
}
.value {
  min-height: 1.25rem;
  line-height: 1.25rem;
  font-size: 0.85rem;
  color: #999999;
  float: left;
  overflow: hidden;
  white-space: nowrap;
}
.price {
  display: inline-block;
  height: 1.875rem;
  line-height: 1.875rem;
  font-weight: bold;
  font-size: 1.15rem;
  float: left;
  color: #fe6263;
}
.empty {
  height: 2.875rem;
}
</style>